---
id: 6153a3952facd25a83fe8083
title: Schritt 23
challengeType: 0
dashedName: step-23
---

# --description--

Das `::after` Pseudo-Element erstellt ein Element, das das letzte untergeordnete Element des ausgewählten Elements ist. Du kann es verwenden, um ein leeres Element nach dem letzten Bild hinzuzufügen. Wenn du ihm die gleiche `width` wie den Bildern gibst, wird es das letzte Bild nach links schieben, im Falle, dass die Galerie ein zweispaltiges Layout hat. Momentan befindet es sich in der Mitte, da du auf dem Flex-Container `justify-content: center` eingestellt hast.

Beispiel:

```CSS
.container::after {
  content: "";
  width: 860px;
}
```

Erstelle einen neuen Selektor, indem du ein `::after` Pseudo-Element auf dem `.gallery` Element verwendest. Füge eine `content`-Eigenschaft zu einem leeren String hinzu `""` und stelle `350px` für die `width`-Eigenschaft ein.

# --hints--

Dein `.gallery::after`-Selektor sollte einen leeren String `""` für die `content`-Eigenschaft festgelegt haben.

```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
```

Dein `.gallery::after`-Selektor sollte `350px` für die `width`-Eigenschaft enthalten.

```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>
  </body>
</html>
```

```css
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

--fcc-editable-region--

--fcc-editable-region--
```
